<template>
    <div v-for="form in data" :key="form.type">
        <el-card v-if="form.details[13].value === 3"  class="box-card" >
            <div slot="header" class="clearfix">
                <!-- Icon 图标：提供了一套常用的图标集合。直接通过设置类名为 el-icon-iconName 来使用即可。 -->
                <!--            <i class="el-icon-s-order" style="color: #0a76a4;margin-right: 1%" />-->
                <span>{{form.type}}</span>
                <!--            <el-button style="float: right; padding: 3px 0" type="primary" @click="">操作按钮</el-button>-->
                <el-button-group class="ml-4">
                    <!-- 查看不分权限 -->
                    <el-button plain icon="View"  @click="view(form)"></el-button>


                    <!-- 编辑，只要工单未被处理时，发起人是本人时才可以删除 -->
                    <el-button plain icon="Delete" v-if="hasDeletePermission(form,0)" @click="del(form)"/>
                    <!-- 分享不分权限 -->
                    <el-button plain icon="Share"  @click="showShare = true"/>
                    <van-share-sheet
                        v-model:show="showShare"
                        :options="options"
                        title="立即分享给好友"
                        description="描述信息"
                        @select="onSelect"
                    />

                </el-button-group>
            </div>
            <div class="text item">
                <!-- Descriptions 描述列表，列表形式展示多个字段。 -->
                <el-descriptions :column="1">
                    <template v-for="(col, index) in form.details">
                        <el-descriptions-item
                            v-if="col.display"
                            :key="index"
                            :label="col.label"
                            :span="col.span"
                        >{{ col.value }}
                        </el-descriptions-item>
                    </template></el-descriptions>
            </div>
            <el-steps :active="3">
                <el-step title="待处理"  />
                <el-step title="处理中" />
                <el-step title="已完成" />
            </el-steps>
        </el-card>
    </div>


    <el-dialog v-model="TableVisible" title="工单详情" width="100%">
        <el-table :data="visibledata.details" width="100%" >
            <el-table-column property="label"  label="名称" />
            <el-table-column property="value" label="值" />
        </el-table>
    </el-dialog>
</template>

<script>

import {hasDeletePermission, hasEditPermission, hasFinishPermission, hasPermission} from "@/store/permission";
import {ref} from "vue";
import {showToast} from "vant";

export default {

    name: "FinishedTasks",
    data(){
        return{
            data:[],
            TableVisible:false,
            visibledata:{}
        }
    },
    setup(){
        const showShare = ref(false);
        const onSelect = (option) => {
            showToast(option.name);
            showShare.value = false;
        };
        const options = [
            {name: '微信', icon: 'wechat'},
            {name: '微博', icon: 'weibo'},
            {name: '复制链接', icon: 'link', description: '描述信息'},
            {name: '分享海报', icon: 'poster'},
            {name: '二维码', icon: 'qrcode'},
        ];
        return {showShare,onSelect,options}
    },
    mounted() {
        console.log('FinishedTasks - mounted')
        // console.log('this.data',this.$store.state.taskList)
        this.data = this.$store.state.taskList
    },
    methods:{
        hasDeletePermission,
        hasEditPermission,
        hasPermission,
        hasFinishPermission,
        showDetails(item) {
            //消息
            this.$message(item.label)
            //console.log(item)
            //更改被点击的标签的颜色
            this.data.digital.forEach((i)=>{
                i.color=''
            })
            item.color = '#FFCC00'

            //要么跳转到子页面
            //要么筛选工单，分开显示各种工单
        },
        share(){
            this.$message('待开发')
        },
        del(form){
            this.$message('删除')
        },
        view(form){
            this.TableVisible = true
            this.$message('查看')
            console.log(form)
            this.visibledata = form
        }
    }
}
</script>

<style scoped>
.box-card {
    width: 100%;
    margin-bottom: 2%;
    border-radius: 3%;
}
.text {
    font-size: 10%;
    margin: 3%;
}
.item {
    margin-bottom: 4%;
}
.clearfix{
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    width:100%;
}
</style>